<template>
    <div class="main">
        <div class="header_box">
            <div class="header">
                <el-row>
                    <el-col :span="8">
                        <div class="title">
                            <span>{{user.userName || user.username}}的空间</span>
                        </div>
                    </el-col>
                    <el-col :span="16">
                        <div class="collocation clerFix">
                            <div class="county">
                                <span>中方县智慧云空间</span>
                            </div>
                            <div class="search">
                                <el-input placeholder="请输入关键词" v-model="input3" class="input-with-select">
                                    <el-button slot="append" icon="el-icon-search">搜索</el-button>
                                </el-input>
                            </div>
                            <div class="messge">
                                <el-badge is-dot class="item" @click.native="goMessage(user.userId)">消息</el-badge>
                            </div>
                            <div class="setup">
                                <el-dropdown>
                                    <span class="el-dropdown-link">
                                        设置
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item>主页装扮</el-dropdown-item>
                                        <el-dropdown-item @click.native="goPersonal()">个人中心</el-dropdown-item>
                                        <el-dropdown-item>退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                user: state => state.userModule.user
            })
        },
        data() {
            return {
                input3: '',
                type: 1
            }
        },
        methods: {
            // 消息
            goMessage(userId) {
                this.$router.push({
                    path: "/message",
                    query: userId
                });
            },
            goPersonal() {
                let type = this.type;
                this.$router.push({
                    path: '/personal/' + type
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        width: 100%;

        .header_box {
            width: 100%;

            .header {
                box-sizing: border-box;
                padding: 15px 0;
                margin: 0 auto;
                width: 80%;

                .title {
                    font-size: 24px;
                    color: rgb(64, 158, 255);
                    text-align: left;
                }

                .collocation>div {
                    float: left;
                }

                .collocation {
                    float: right;

                    .county {
                        color: rgb(64, 158, 255);
                        margin: 10px 50px 0 0;
                    }

                    .search {
                        width: 400px;
                    }

                    .messge {
                        cursor: pointer;
                        margin: 10px 50px 0 50px;
                    }

                    .setup {
                        margin-top: 10px;
                        cursor: pointer;
                    }
                }
            }
        }
    }
</style>